<template>
  <div style="padding: 20px;">
    <el-card>
      <el-button type="primary" @click="handleAdd()" style="margin-bottom: 10px">
        新增
      </el-button>

      <el-table :data="deviceList" style="width: 100%" border >
        <el-table-column prop="deviceName" label="设备名称" width="130" align="center" />
        <el-table-column prop="ip" label="ip" width="150" align="center" />
        <el-table-column label="设备类型" align="center" prop="type" width="100">
          <template #default="scope">
<!--            <dict-tag :options="device_type" :value="scope.row.type"/>-->
            <el-tag v-if="scope.row.type == 1">海康</el-tag>
            <el-tag v-if="scope.row.type == 2">大华</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="url" label="rtsp地址" width="700" align="center" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button size="small" @click="handleView(scope.row)">
              播放
            </el-button>
            <el-button size="small" @click="handleEdit(scope.row)">
              修改
            </el-button>
            <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog :title="title" v-model="open" width="700px" append-to-body>
      <el-form ref="deviceRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="设备名称" prop="deviceName">
          <el-input v-model="form.deviceName" placeholder="请输入设备名称" />
        </el-form-item>
        <el-form-item label="IP地址" prop="ip">
          <el-input v-model="form.ip" placeholder="请输入IP地址" />
        </el-form-item>
        <el-form-item label="设备类型" prop="type">
        <el-select v-model="form.type" placeholder="请选择设备类型">
          <el-option
              v-for="dict in device_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
          ></el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="设备账号" prop="userName">
          <el-input v-model="form.userName" placeholder="请输入设备账号" />
        </el-form-item>
        <el-form-item label="设备密码" prop="password">
          <el-input v-model="form.password" placeholder="请输入设备密码" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import {ref, onMounted} from "vue";
import { getDeviceList, getDeviceInfo, addDevice, editDevice, deleteDevice } from "../api/device";
import { ElMessage } from 'element-plus';
import router from '@/router';

const queryParams = ref({
  deviceName: undefined
})

const device_type = ref([
  { label: '海康', value: '1' },
  { label: '大华', value: '2' },
])

const deviceRef = ref(null);
const title = ref("");
const open = ref(false);
const deviceList = ref([]);
const form = ref({
  deviceId: '',
  deviceName: '',
  ip: '',
  userName: '',
  password: '',
  enabledFlv: '1',
  enabledHls: '1',
  mode: '',
  type: '1',
})

const rules= ref({
  deviceName: [
    { required: true, message: "设备名称不能为空", trigger: "blur" }
  ],
  ip: [
    { required: true, message: "IP地址不能为空", trigger: "blur" }
  ],
  type: [
    { required: true, message: "设备类型(1=haikan,2=dahua)不能为空", trigger: "change" }
  ],
  userName: [
    { required: true, message: "设备账号不能为空", trigger: "blur" }
  ],
  password: [
    { required: true, message: "设备密码不能为空", trigger: "blur" }
  ],
})

onMounted(() => {
  getList();
})

const getList = () => {
  getDeviceList(queryParams.value).then(res => {
    deviceList.value = res.data.data;
  });
}

const handleAdd = () => {
  title.value = "添加设备";
  open.value = true;
  reset();
}

const cancel = () => {
  open.value = false;
  reset();
}

const reset = () => {
  form.value = {
    deviceId: '',
    deviceName: '',
    ip: '',
    userName: '',
    password: '',
    enabledFlv: '1',
    enabledHls: '1',
    mode: '',
    type: '1',
  };
}

const handleEdit = (row) => {
  title.value = "修改设备";
  getDeviceInfo(row.deviceId).then(res => {
    form.value = res.data.data;
    open.value = true;
    reset();
  });
}

const handleDelete = (row) => {
  deleteDevice(row.deviceId).then(reset => {
    ElMessage({
      message: '删除成功',
      type: 'success',
    })
    getList();
  })
}

const submitForm = () => {
  deviceRef.value.validate(valid => {
    if (valid) {
      if (title.value === "添加设备") {
        addDevice(form.value).then(response => {
          open.value = false;
          ElMessage({
            message: '新增成功',
            type: 'success',
          })
          getList();
        })
      }else {
        editDevice(form.value).then(response => {
          open.value = false;
          ElMessage({
            message: '修改成功',
            type: 'success',
          })
          getList();
        })
      }
    }
  })
}

const handleView = (row) => {
  router.push({ path: "/flv", query: {deviceId: row.deviceId} });
}


</script>

<style scoped>

</style>